<template>
  <div class="order-model">

    <el-breadcrumb class="back-btn" separator-class="el-icon-arrow-right">
      <el-button  @click='appBack' type="primary"> < 返回 </el-button>
    </el-breadcrumb>

    <div class="order-list">
      <div class="table-box">
        <el-table :data="goodsList">
          <el-table-column label="商品" width="250px;">
            <template slot-scope="scope">
              <div class="goodsDetail clearfix">
                <div class="priviewImg lf">
                  <img :src="scope.row.goods_image" alt="">
                </div>
                <div class="goodsMsg lf">
                  <span>{{scope.row.goods_name}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品规格">
            <template slot-scope="scope">
              <div>
                {{scope.row.sku_attr}}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="成本价/零售价">
            <template slot-scope="scope">
              <div class="price">
                ￥{{scope.row.supply_price}}
              </div>
              <div class="price">
                ￥{{scope.row.sell_price}}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="玩购价">
            <template slot-scope="scope">
              <div class="price">
                ￥{{scope.row.play_price}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单号" width="150px">
            <template slot-scope="scope">
              <div class="detail">
                {{scope.row.order_sn}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="时间" width="200px">
            <template slot-scope="scope">
              <div class="detail">
                {{scope.row.add_time}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="实付" prop="pay_amount">
            <template slot-scope="scope">
              <div class="price">
                ￥{{scope.row.pay_amount}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="来源">
            <template slot-scope="scope">
              <div class="detail">
                {{scope.row.gs_name}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="group_name">
            <template slot-scope="scope">
              <div class="price">
                {{scope.row.status===10?'待付款':scope.row.status===20?'已付款':scope.row.status===30?'已发货':scope.row.status===40?'已完成':'已取消'}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="table-user">
          <el-col>
            <el-card :body-style="{ padding: '0px' }">
              <div class="orderDetail clearfix">
                <div class="information lf">
                  <div class="info-item clearfix">
                    <div class="labelName lf">联系人：</div>
                    <div class="content lf">{{contact}}</div>
                  </div>
                  <div class="info-item clearfix">
                    <div class="labelName lf">电话：</div>
                    <div class="content lf">{{phone_mob}}</div>
                  </div>
                  <div class="info-item clearfix">
                    <div class="labelName lf">地址：</div>
                    <div class="content lf">{{region_name}} {{address}}</div>
                  </div>
                </div>
                <div class="btns">
                  <el-button class="elButton" type="primary" @click="dialogVisible=true" >修改地址</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <div class="express-title" v-if="shipping_status === 30 && express">物流信息</div>
        <el-row class="express-info" v-if="shipping_status === 30 && express">
          <el-col >
            <el-card :body-style="{ padding: '0px' }">
              <div class="info-title">
                <span class="brand">物流公司：{{shipping_name}}</span>
                <span class="num">运单号码：{{shipping_no}}</span>
                <span class="time">发货时间：{{ship_time}}</span>
              </div>
              <div class="info-body">
                <div class="info-detail" :class="{ first: (index === 0),last:(index === express.data.length - 1) }" v-for="(item, index) in express.data" :key="index">
                  <span class="time">{{item.time}}</span>
                  <span class="context"> {{item.location}} {{item.context}}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1000px"
      title="修改收货人信息"
      :show-close="false">
      <!-- <div class="titleName">修改收货人信息</div> -->
      <div class="region">
        <div class="form-item clearfix">
          <div class="labelName required lf">收货地址：</div>
          <div class="form-content lf clearfix">
            <div class="lf">
              <el-cascader v-model="region_id" class="lf" :options="regionOptions" :props="props"
                @active-item-change="handleItemChange"
              ></el-cascader>
            </div>
          </div>
        </div>
        <div class="form-item clearfix">
          <div class="labelName lf"></div>
          <div class="form-content lf clearfix">
            <el-input class="elInput" v-model="editAddress"></el-input>
          </div>
        </div>
        <div class="form-item clearfix">
          <div class="labelName required lf">收货人：</div>
          <div class="form-content lf">
            <el-input v-model='consignee' class="elInput"></el-input>
          </div>
        </div>
        <div class="form-item clearfix">
          <div class="labelName required lf">收货人电话：</div>
          <div class="form-content lf">
            <el-input v-model='phone' class="elInput" ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="elButton" type="primary" @click="handleClickeditAddress">确 定</el-button>
        <el-button class="elButton" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "order",
  watch: {
    $route(to, from) {
      //console.log("orderDetail:", to.params);
      //console.log("orderDetail:", from.params);
    }
  },
  methods: {
    //回退按钮
    appBack() {
      window.history.back();
    },

    handleClickeditAddress() {
      let reqArr = [
        ["region_id", "Array", "请选择区域"],
        ["editAddress", "string", "请输入具体地址"],
        ["consignee", "string", "请输入收货人"],
        ["phone", "string", "请输入收货人电话"]
      ];
      let res = this.$requiredFun(reqArr, this);
      //console.log(res);
      if (res.state) {
        if (this.region_id.length !== 3) {
          this.$message.error("请选择具体区域");
          return;
        }
        let formData = new FormData();
        formData.append("region_id", this.region_id[2]);
        formData.append("order_id", this.$route.params.orderId);
        formData.append("address", this.editAddress);
        formData.append("consignee", this.consignee);
        formData.append("phone", this.phone);
        // 平台判断
        this.platform == "wgxq" ? formData.append("backend_type", 2) : formData.append("backend_type", 0)
        this.$http(
          "/wgl_admin/index.php?app=order&act=address",
          "post",
          {},
          {},
          formData,
          success => {
            this.$message.success("修改成功");
            //console.log(success.data);
            this.getOrderDetail(this.platform); //重新获取订单信息
            this.dialogVisible = false;
          },
          error => {
            this.$message.error(error.state.msg);
          }
        );
      } else {
        this.$message.error(res.msg);
      }
    },

    handleItemChange(val) {
      //console.log(val[val.length - 1]);
      //console.log(val.length);
      this.getRegions(val);
    },

    //获取地理位置集合
    getRegions(val) {
      this.$http(
        "/api/index.php?app=address&act=regions",
        "GET",
        {},
        { parent_id: val[val.length - 1] },
        {},
        success => {
          //处理数据格式
          let arr = [];
          for (let i in success.data) {
            let obj = {};
            obj["parent_id"] = i;
            obj["label"] = success.data[i];
            if (val.length !== 2) {
              obj["cities"] = [];
            }
            arr.push(obj);
          }
          if (val[0] === 1) {
            this.regionOptions = arr;
            return;
          }
          if (val.length === 1) {
            for (let item of this.regionOptions) {
              if (item.parent_id == val[0]) {
                item.cities = arr;
              }
            }
          } else if (val.length === 2) {
            for (let item of this.regionOptions) {
              if (item.parent_id == val[0]) {
                for (let city of item.cities) {
                  if (city.parent_id == val[1]) {
                    city.cities = arr;
                  }
                }
              }
            }
          }
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    getlogistics() {
      this.$http(
        "/wgl_admin/index.php?app=order&act=logistics",
        "get",
        {},
        {},
        {},
        success => {
          //console.log(success);
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //获取订单详情
    getOrderDetail(platform) {
      let backend_type = platform == "wgxq" ? 2 : 0
      this.$http(
        "/wgl_admin/index.php?app=order&act=detail",
        "get",
        {},
        { order_id: this.$route.params.orderId, backend_type},
        {},
        success => {
          //console.log(success.data);
          this.contact = success.data.consignee;
          this.address = success.data.address;
          this.region_name = success.data.region_name;
          this.express = success.data.express;
          this.phone_mob = success.data.phone_mob;
          this.ship_time = success.data.ship_time;
          this.shipping_no = success.data.shipping_no;
          this.shipping_name = success.data.shipping_name;
          this.shipping_status = success.data.status;
          this.region_name = success.data.region_name;

          //处理数据
          if (success.data.goods.length > 0) {
            let goodsArr = [];
            for (let goods of success.data.goods) {
              goods["status"] = success.data.status;
              goods["add_time"] = success.data.add_time;
              goods["pay_amount"] = success.data.pay_amount;
              goods["order_sn"] = success.data.order_sn;
              goodsArr.push(goods);
            }
            this.goodsList = goodsArr;
          }
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    }
  },
  components: {},
  created() {
    console.log(this.$route.params);
    
    if (this.$route.params.activityType) {
      // 玩购星球订单 传2
      this.platform = this.$route.params.activityType
      this.getOrderDetail(this.platform);
    } else {
      // 非玩购星球订单 传0
      this.platform = 'wgl'
      this.getOrderDetail(this.platform);
    }
    this.getlogistics();
    this.getRegions([1]); //获取地理位置信息
  },
  mounted() {
    this.$nextTick(() => {
      this.currentOrderType = parseInt(this.$route.params.orderType);
    });
  },
  data() {
    return {
      platform:'wgl',
      dialogVisible: false,
      phone: "",
      consignee: "",
      address: "",
      region_name: "",
      express: "",
      editAddress: "",
      region_id: [],
      region_name: "",
      ship_time: "",
      shipping_no: "",
      shipping_name: "",
      shipping_status: "",
      currentOrderType: "",
      props: {
        value: "parent_id",
        children: "cities"
      },
      regionOptions: [],
      phone_mob: "",
      contact: "",
      goodsList: [],
      orderList: [],
      listData: [
        {
          name: "全部",
          num: -1,
          isActive: false
        },
        {
          name: "待付款",
          num: 10,
          isActive: false
        },
        {
          name: "待发货",
          num: 20,
          isActive: false
        },
        {
          name: "已发货",
          num: 30,
          isActive: false
        },
        {
          name: "已兑换",
          num: 11,
          isActive: false
        },
        {
          name: "已完成",
          num: 40,
          isActive: false
        },
        {
          name: "已关闭",
          num: 0,
          isActive: false
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.region {
  width: 590px;
  margin: 0 auto;
  .form-item {
    margin-bottom: 20px;
    .labelName {
      width: 80px;
      text-align: right;
      height: 40px;
      line-height: 40px;
      margin-right: 10px;
      font-size: 12px;
      color: #333;
    }
    .labelName.required:before {
      content: "*";
      font-size: 12px;
      display: inline;
      color: #df0024;
    }
    .form-content {
      height: 40px;
      width: 500px;
      > .elInput {
        width: 500px;
      }
    }
  }
}
.order-model {
  width: 100%;
  position: relative;
  padding-left: 118px;

  .back-btn {
    padding: 40px 0;
  }

  .order-list {
    /*margin: 0 50px;*/
    /*padding-top: 50px;*/
  }
  .btns {
    min-width: 1080px;
    padding-top: 30px;
    margin-bottom: 38px;
  }
  .table-box {
    // width: 1466px;
    .table-user {
      margin-top: 40px;
    }
    .express-title {
      color: #333;
      font-size: 18px;
      margin: 40px 30px 20px;
    }
    .express-info {
      margin-bottom: 60px;

      .info-title {
        padding: 30px;
        border-bottom: 1px solid #e6e8f4;

        .brand,
        .num,
        .time {
          color: #333;
          font-size: 12px;
          margin-right: 60px;
        }
      }
      .info-body {
        padding: 28px;
        .info-detail {
          padding-left: 24px;
          margin-bottom: 40px;
          font-size: 0;

          &.first .time:before {
            background-color: #e60012;
          }
          &.last .time:after {
            height: 0;
          }

          .time {
            position: relative;
            font-size: 12px;
            color: #3f87f5;
            margin-right: 44px;

            &:before {
              position: absolute;
              top: 3px;
              left: -29px;
              z-index: 11;
              content: "";
              width: 11px;
              height: 11px;
              border-radius: 50%;
              background-color: #3f87f5;
            }

            &:after {
              position: absolute;
              top: 12px;
              left: -24px;
              z-index: 10;
              content: "";
              width: 1px;
              height: 49px;
              border-radius: 50%;
              background-color: #dce0f2;
            }
          }
          .context {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
  .orderDetail {
    width: 1466px;
    background: #fff;
    padding: 64px 30px;
    .information {
      width: 284px;
      height: auto;
      color: #999999;
      font-size: 12px;
      .labelName {
        width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: right;
      }
      .content {
        height: 30px;
        line-height: 30px;
      }
    }
  }
}

.price {
  font-size: 12px;
  color: #e17474;
}
.detail {
  color: #999;
  font-size: 12px;
}
.goodsDetail {
  .priviewImg > img {
    display: block;
    width: 80px;
    height: 80px;
  }
  .goodsMsg {
    color: #333;
    font-size: 12px;
    max-width: 120px;
    margin-left: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}
.dialog-footer {
  display: block;
  height: 100%;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid #e6e8f4;
  .elButton {
    width: 150px;
  }
}
</style>
